<template>
	<div class="container">
		<div v-for="(item, index) in ordersList" :key="index" :id="'scroll' + index">
		  <div class="list_card" @click="toDetail(item.id)" >
		    <van-card 
		      :key="index"
		        :thumb="item.image"
		      :title="item.number"
			  :desc="item.orderTime"
		    >
			<template #footer>
			  <span>取餐号{{item.id}}</span>
			</template>
		    </van-card>
		  </div>
		</div>
	</div>
	
</template>

<script setup>
	import { ref, reactive, getCurrentInstance, onMounted, watchEffect,toRefs,computed } from 'vue';
	import { listOrders } from '@/api/store/list.js';
	
	import { useRouter } from 'vue-router';
	const ordersList = ref([]);
	const data = reactive({
	  form: {},
	  queryParams: {
	    pageNum: 1,
	    pageSize: 100,
		
	  },
	});
	const { queryParams, form, rules } = toRefs(data);
	function getList() {
	  listOrders(queryParams.value).then(response => {
	    ordersList.value = response.rows;
	  });
	}
	
	function toDetail(id){
		uni.navigateTo({
		   url: `../list/detail?id=${id}`,
		  success: function (res) {
		    console.log('成功跳转到新页面');
		  },
		  fail: function (err) {
		    console.error('跳转失败:', err);
		  }
		});
	}
	
	const beforeRouteEnter = (to, from, next) => {
	  next(vm => {
	    vm.getList();
	  });
	};

    
	onMounted(() => {
	   getList()
	   
	});
</script>

<style>
	.container{
		margin-top: 20rpx;
	}
	.list_card{
		margin: 40rpx;
	}
</style>